<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="referrer" content="never">
    <title>单样式动画封装</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }

        .box{
            position: absolute;
            top: 50px;
            left: 50px;
            width: 150px;
            height: 150px;
            background-color: #f00;
        }
    </style>
</head>
<body>
    <!-- left top  width height padding.... -->
    <div class="box"></div>

    <script type="text/javascript">
        // width -> 600 缓动 
        var box = document.querySelector(".box");

        box.onclick = function (){
            move(this, "opacity", .3);
            // move(this, "width", 600);
            // move(this, "height", 600);
        }

        // obj.xxx 已知属性名  obj[xxx]：计算属性。属性名是变量或者表达式的值，或者长字符串

       /*  var key = "user.name";
        var obj = {
            "user.name": "张飞"
        }

        console.log(obj.key); // undefined
        console.log(obj[key]); // 张飞 */
        
        function move(ele, styleName, end){
            // 判断是否用定时器，有清除
            if(ele.timer){
                clearInterval(ele.timer);
            }

            // 对于透明度 进行(起点/终点)放大处理 100  赋值时要缩小
            if(styleName == "opacity"){
                end *= 100;
            }

            ele.timer = setInterval(function (){
                // 获取元素样式 -> ele.style.xx  内联/外联 getComputedStyle(ele, "伪元素名") -- 带单位的字符串  150px => 150
                
                if(styleName == "opacity"){
                    // parseInt是取整数，因此需要先放大在使用parseInt
                    var start = parseInt(getComputedStyle(ele, null)[styleName] * 100);
                }else {
                    var start = parseInt(getComputedStyle(ele, null)[styleName]);
                }

                var step = (end - start)/10;
                if(Math.abs(step) < 1){
                    step = step > 0 ? 1 : Math.floor(step);
                }

                if(styleName == "opacity"){
                    ele.style.opacity = (start + step)/100;

                }else {
                    ele.style[styleName] = start + step + "px";
                }
                
                if(start + step === end){
                    clearInterval(ele.timer);
                    ele.timer = null;
                }
            }, 1000/60)
        }
    </script>
</body>
</html>